<template>
  <div class="order-details">
    <div class="top-container">
      <div class="status">{{ good.db.status | orderStatus }}</div>
      <div class="info">收货点： {{ good.db.address }}</div>
      <div class="info">订单编号： {{ good.db.orderno }}</div>
      <div class="info">订单创建时间： {{ good.db.addtime }}</div>
    </div>
    <div class="middle-container">
      <div class="info-item" v-for="(item, index) in good.db1" :key="index">
        <div class="left-container">
          <img :src="imgUrl + item.indexpic" alt />
        </div>
        <div class="right-container">
          <div class="price">$ {{ item.price }}</div>
          <div class="name">{{ item.title }}</div>
          <div class="order-num">{{ orderno }}</div>
        </div>
      </div>
      <div class="footer-container">
        <div class="top">已优惠{{ good.db.couponamount }}元</div>
        <div class="bottom">
          共{{ good.db.num }}件商品，合计 <span class="price">${{ good.db.amount }}</span>
        </div>
      </div>
    </div>
    <div class="bottom-container">
      <span class="btn" v-if="good.db.status === 2" @click="viewLogistics">查看物流</span>
      <span class="btn" v-if="good.db.status === 0" @click="payShow = true">确认付款</span>
      <span class="btn" v-if="good.db.status === 1" @click="goRefund">去退款</span>
      <span class="btn" v-if="good.db.status === 2" @click="goRefund">去退款</span>
      <span class="btn" v-if="good.db.status === 2" @click="confirmReceipt">确认收货</span>
      <span class="btn" v-if="good.db.status === 6">去评价</span>
    </div>

    <!-- 支付订单 -->
    <van-action-sheet
      v-model="payShow"
      title="请选择支付方式"
      :actions="payActions"
      cancel-text="取消"
      close-on-click-action
      @select="payClick"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
export default {
  filters: {
    orderStatus (el) {
      let arr = ['待付款', '待发货', '待收货', '已完成', '已取消', '已退款', '待评价', '申请退款', '拼团中', '拼团识别']
      return arr[el]
    }
  },
  data () {
    return {
      payShow: false,
      payActions: [
        {
          name: "微信支付",
          index: 1
        },
        {
          name: "银联支付",
          index: 2
        },
        {
          name: "货到付款",
          index: 3
        }
      ],
      good: {
        db: {},
        db1: []
      }
    }
  },
  computed: {
    orderno () {
      return this.$route.query.orderno
    },
    imgUrl () {
      return this.$imgUrl
    }
  },
  created () {
    this.getOrderDetails()
  },
  methods: {
    async getOrderDetails () {
      const result = await this.$fetchGet('/home/member/orderview', {
        orderno: this.orderno
      })
      this.good = result.data
      console.log(result)
    },
    async payClick(action, index) {
      if (action.index !== 1) {
        this.$toast('选择支付方式开发中')
        return
      }
      const result = await this.$fetchGet("/home/pay/wxpay", {
        orderno: this.orderno
      });
      if (result.success) {
        window.location.href = result.data.url
      } else {
        this.$toast(result.msg)
      }
    },
    onCancel() {
      // this.payOrderInfo = null
    },
    /*
     *@name: 去退款
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 14:12:15
    */
    goRefund () {
      this.$router.push({
        path: '/applyReturn',
        query: {
          orderno: this.orderno
        }
      })
    },
    /*
     *@name: 确认收货
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 15:09:39
    */
    confirmReceipt (item) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '是否确认收货？',
        beforeClose: async (action, done) => {
          if (action === 'cancel') {
            done()
            return
          }
          const result = await this.$fetchGet('/home/member/confirmorder', {
            orderno: this.orderno
          })
          if (!result.success) {
            this.$toast(result.msg)
            return
          }
          this.$toast('收货成功')
          done()
          this.getOrderDetails()
        }
      })
    },
    /*
     *@name: 查看物流
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 18:13:56
    */
    async viewLogistics () {
      const result = await this.$fetchGet('/home/member/express', {
        orderno: this.orderno
      })
      if (!result.success) {
        this.$toast(result.msg)
        return
      }
      window.open(result.data.expressurl)
    }
  }
}
</script>

<style lang="scss">
.order-details {
  .top-container {
    box-shadow: 0 0 10px #888;
    padding: 30px 20px;
    .status {
      font-size: 30px;
      color: #F25050;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .info {
      margin-bottom: 5px;
      font-size: 25px;
      color: #BFBFBF;
    }
  }
  .middle-container {
    box-shadow: 0 0 10px #888;
    margin: 50px 0;
    padding: 50px 0;
    .info-item {
      display: flex;
      border-bottom: 1PX solid #E8E8E8;
    }
    .left-container {
      width: 150px;
      height: 150px;
    }
    .right-container {
      flex: 1;
      margin-left: 50px;
      .price {
        font-size: 40px;
        color: #ff3b3b;
        font-weight: bold;
      }
      .name {
        font-size: 25px;
        margin-top: 20px;
        color: #646464;
      }
      .order-num {
        margin-top: 10px;
        font-size: 25px;
        color: #646464;
      }
    }
    .footer-container {
      margin-top: 50px;
      text-align: right;
      padding-right: 50px;
      .top {
        color: #D4D4D4;
      }
      .bottom {
        margin-top: 20px;
        color: #585858;
        .price {
          font-size: 30px;
          color: #FF1E10;
          font-weight: 600;
        }
      }
    }
  }
  .bottom-container {
    position: fixed;
    bottom: 0;
    width: 100vw;
    line-height: 100px;
    // height: 100px;
    box-shadow: 0 0 10px #888;
    text-align: right;
    padding: 0 20px;
    .btn {
      // display: inline-block;
      padding: 15px 20px;
      color: #fff;
      font-weight: bold;
      border-radius: 20px;
      text-align: center;
      margin-left: 20px;
      background: linear-gradient(to right, #fc8f04, #f71c19);
    }
  }
}
</style>